import React, { useEffect, useState } from 'react';
import { Button, Input, message } from 'antd';
import styles from "./register.module.less"
import logo from "../../assets/images/avatar.jpg"
import { reqRegister } from '../../api';

const Register = (props) => {
    const { onClick, registration, clickLogin, verifyCodeLogin,onCancel } = props
    const [password, setPassword] = useState("")
    const [username, setUsername] = useState("")
    const [mail, setMail] = useState("")
    const [id, setId] = useState("")
    const [verify, setVerify] = useState("")
    // 获取的verify

    // 点击注册
    const clickRegister = async() => {
            //注册请求
            let result = await reqRegister(id, username, password ,mail, verify)
            localStorage.setItem("token", result.data.data)
            localStorage.setItem("authorId", id)
            onCancel()
            message.success("注册成功")
    }

    return (
        <div className={styles["contents"]}>
            <div className={styles.logo} ><img src={logo} alt="" /></div>
            <div className={styles.title} >
                <span>
                    {
                        registration ? "邮箱注册" : "账号密码登录"
                    }
                </span>
            </div>
            <div className={styles["login"]}>
                <div className={styles["login-id"]}>
                    <Input type="text" placeholder="邮箱" value={mail} onChange={(e) => { setMail(e.target.value) }} />
                </div>

                {
                    registration ? (
                        <>
                            <Input type="text" placeholder="手机号" value={id} onChange={(e) => { setId(e.target.value) }} className={styles.regiterPhone} />
                            <Input type="text" placeholder="用户名"   value={username} onChange={(e) => { setUsername(e.target.value) }} />
                            <div className={styles["login-password"]} style={{ display: "flex" }}>
                                <Input type="text" placeholder="验证码" value={verify} onChange={(e) => { setVerify(e.target.value) }} />
                                <Button type="link" onClick={()=>verifyCodeLogin(mail)}>获取验证码</Button>
                            </div>
                            <Input type="password" placeholder="设置初始密码" value={password} onChange={(e) => { setPassword(e.target.value) }} />
                        </>
                    ) : <div className={styles["login-password"]}>
                        <Input type="text" placeholder="密码" value={password} onChange={(e) => { setPassword(e.target.value) }} />
                    </div>
                }

                <div className={styles["login-btn"]}>
                    {
                        !registration ? <Button type="primary" shape="round" block onClick={() => clickLogin(mail, password)}>登录</Button>
                            : <Button type="primary" shape="round" block onClick={() => clickRegister()}>注册</Button>
                    }
                </div>

                <div className={styles["login-select"]}>
                    <div><Button type="link" onClick={onClick}>邮箱验证码登录</Button></div>
                    <div className={styles["register"]}><Button type="link">忘记密码</Button></div>
                </div>
                <div className={styles["admin-login"]}>
                    <Button type="primary" shape="round" block onClick={clickLogin}>管理员登录</Button>
                </div>
                <div className={styles["login-footer"]}>登录注册即代表同意协议</div>
            </div>
        </div>

    )
}
export default Register
